<template>
    <Modal class-name="c-scheduler-holiday" :value="show" :mask-closable="false" :closable="true"
        :width="800" :title="lang.title" :transfer="false" @on-visible-change="onChange" @on-ok="onOk">
        <Spin size="large" fix v-if="loading"></Spin>
        <ul class="listwp flex">
            <li v-for="(item, index) in list" :key="index">
                <p class="ellipsis">{{ item.date.replace(' 00:00:00', '') }} {{ item.name }}</p>
                <Button type="text" icon="ios-trash" @click="onDelete(item)"></Button>
            </li>
        </ul>

        <Form ref="_form" class="addwp flex-middle" :model="form" inline :rules="rules">
            <FormItem :label="lang.form_date" prop="date">
                <DatePicker type="date" style="width: 220px" v-model="form.date" transfer
                    format="yyyy-MM-dd" />
            </FormItem>
            <FormItem :label="lang.form_name" prop="name" class="flex">
                <Input v-model="form.name" maxlength="6" :placeholder="lang.form_name_placeholder"
                    clearable></Input>
            </FormItem>
            <FormItem>
                <Button icon="ios-add" type="primary" @click="onAdd"></Button>
            </FormItem>
        </Form>
    </Modal>
</template>

<script>
import dayjs from "dayjs";
export default {
    props: {
        show: {
            default: false
        },
        model: {        // 绑定的模型
            type: Object,
            default() {
                return { className: 'calendar_holiday', type: 'entity' }
            }
        },
        data: {
            default() {
                return []
            }
        },
    },
    model: {
        prop: 'show',
        event: 'change'
    },
    data() {
        return {
            loading: false,
            form: {
                date: '',
                name: ''
            },
            rules: {
                date: [{ required: true, type: 'object', message: '请输入日期', trigger: 'blur' }],
                name: [{ required: true, message: '请输入假期描述', trigger: 'blur' }],
            },
            apiInstance: this.$modelObject.create(this.model.type),
            apiInstanceCollection: this.$modelObject.create(this.model.type + 'Collection'),
            list: this.data
        }
    },
    watch: {
        show(val) {
            // this.visible = val
            // val && this.onEvent('query');
        },
        data(val) {
            console.log("🚀 ~ file: holiday.vue:74 ~ data ~ val:", val)
            this.list = val
        }
    },
    mounted() {
        // this.onEvent('query')
    },
    methods: {
        onOk() {
        },
        onChange(val) {
            this.$emit('change', val)
            !val && this.$emit('close')
        },
        onAdd() {
            this.$refs._form.validate((valid) => {
                if (valid && !this.loading) {
                    this.onEvent('create', {
                        sf_name: this.form.name,
                        tf_date: dayjs(this.form.date).format('YYYY-MM-DD HH:mm:ss')
                    })
                } else {
                }
            })
        },
        onDelete(data) {
            this.onEvent('delete', data)
        },
        onEvent(action, data = {}) {
            switch (action) {
                case "query":
                    this.loading = true
                    this.apiInstanceCollection.query(this.apiInstance.util.getFilter(this.model))
                        .then(flag => {
                            if (!flag) {
                                return;
                            }
                            let curRes = [];
                            let res = this.apiInstanceCollection.records;
                            if (res && res.length) {
                                res.forEach(item => {
                                    item.values.tf_date && (curRes = curRes.concat({
                                        id: item.id,
                                        date: item.values.tf_date,
                                        name: item.values.sf_name
                                    }))
                                })
                                // console.log('query-holiday', curRes);
                                this.list = curRes.sort((pre, cur) => { return cur.date > pre.date ? 1 : -1})
                            }
                            this.loading = false
                        }).catch(err => {
                            this.loading = false
                        })
                    break;
                case "delete":
                    this.apiInstance.deleteById(data.id).then(flag => {
                        this.onEvent('query')
                        this.$Message.success(this.lang.message_delete)
                    })
                    break;
                case "create":
                default:
                    if (this.list.filter(item => item.date === data.tf_date).length) {
                        this.$Message.error(this.lang.message_repeat)
                        return
                    }
                    this.loading = true
                    this.apiInstance.add({
                        ...this.model,
                        name: +new Date(),
                        values: data
                    }).then(flag => {
                        this.loading = false
                        this.form.date = ''
                        this.onEvent('query')
                        this.$Message.success(this.lang.message_add)
                    }).catch(err => {
                        this.loading = false
                    })
                    break;
            }
        },
    },
    computed: {
        lang() {
            return {
                'zh-CN': {
                    title: '配置日历假期',
                    okText: '保存',
                    form_date: '日期',
                    form_name: '假期描述',
                    form_name_placeholder: '假期描述，最多6个字',
                    rule_date: '请输入日期',
                    rule_name: '请输入假期描述',
                    message_add: '添加成功',
                    message_delete: '删除成功',
                    message_repeat: '日期已存在，请删除后添加',
                },
                'en-US': {
                    title: 'Configure calendar holidays',
                    okText: 'save',
                    form_date: 'Date',
                    form_name: 'Holiday description',
                    form_name_placeholder: 'Holiday description, up to 6 words',
                    rule_date: 'Please enter the date',
                    rule_name: 'Please enter the holiday description',
                    message_add: 'Successfully added',
                    message_delete: 'Delete succeeded',
                    message_repeat: 'Date already exists, please delete and add',
                }
            }[this.$i18n.locale]
        }
    }
}
</script>

<style lang="less">
.c-scheduler-holiday {
    .ivu-modal-content {
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .ivu-modal {
        max-height: calc(~"100vh - 120px");
        overflow: auto;
        background: #fff;
    }

    .listwp {
        padding: 12px;
        margin-bottom: 16px;
        list-style: none;
        border: 1px solid #eee;
        &:empty {
            border: none;
        }
        flex-wrap: wrap;
        li {
            width: 33.3333%;
            height: 40px;
            padding: 0 6px;
            font-size: 14px;
            display: flex;
            align-items: center;

            &:hover {
                background-color: #eee;

                .ivu-btn {
                    display: block;
                    margin-left: 8px;
                }
            }

            .ivu-btn {
                display: none;
                color: red;
            }
        }
    }

    .addwp {
        .ivu-form-item {
            display: flex;
        }
        .ivu-btn {
            position: relative;
            // top: 4px;
            &:hover {
                background-color: rgb(109, 109, 235);
                color: #fff;
            }
        }
    }
}
</style>